<template>
  <div class="loginPage">
    <div class="close">
      <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logoNew">
      <span class="iconfont iconnew"></span>
      <div class="cloud"></div>
      <div class="moon"></div>
    </div>
    <div class="inputDom">
      <AuthInput
        type="text"
        placeholder="用户名 / 手机号码"
        :regular="userRegular"
        err_msg="手机号错误"
        @changeVal="getUsername"
        :focus="focus"
        @submit="login"
      />
      <AuthInput
        type="password"
        placeholder="密码"
        :regular="pwdRegular"
        err_msg="密码有误"
        @changeVal="getPassword"
        @submit="login"
      />
    </div>
    <AuthButton ButtonType="登录" @submit="login" />
  </div>
</template>

<script>
// 导入输入框的子组件
import AuthInput from "../components/AuthInput";
// 导入按钮的子组件
import AuthButton from "../components/AuthButton";
export default {
  data() {
    return {
      username: "",
      password: "",
      userRegular: /^\d{5,11}$/,
      pwdRegular: /^\w{3,8}$/,
      focus: true,
    };
  },
  // 注册子组件
  components: {
    AuthInput,
    AuthButton,
  },
  methods: {
    // 获取子组件输入框的数据
    getUsername(username) {
      this.username = username;
    },
    getPassword(password) {
      this.password = password;
    },

    // 点击登录按钮发送请求
    login() {
      // console.log("提交登录");
      // 校验点击提交输入框为空
      // if (!this.username || !this.password) {
      //   //点击按钮后 提示内容不能为空
      //   this.$toast.fail("用户名和密码不能为空");
      //   // 阻止往下执行
      //   return;
      // }
      /* 必须根据正则进行输入框的校验判断，理由是:处理注册遗留下来的一些格式不对的账号问题，
      就防止之前注册格式不对的账号也能登录的问题 */
      if (
        !this.userRegular.test(this.username) ||
        !this.pwdRegular.test(this.password)
      ) {
        this.$toast.fail("用户名和密码格式错误");
        return;
      } else {
        // 发送请求
        this.$axios({
          url: "/login",
          method: "post",
          data: {
            username: this.username,
            password: this.password,
          },
        })
          .then((res) => {
            // console.log(res);
            // 用户名不存在
            // if (res.data.statusCode === 401) {
            //   // 提示用户名不存在
            //   this.$toast.fail(res.data.message);
            //   return;
            // }
            // console.log(ass6poooioo);
            if (res.data.message === "登录成功") {
              // console.log("ee");
              // 登录前将token值存储到本地存储
              window.localStorage.setItem("token", res.data.data.token);
              // console.log("wew");
              // 还要将用户的id存储在本地
              window.localStorage.setItem("userId", res.data.data.user.id);
              this.$toast.success("登录成功"),
                // 登录成功延时跳转首页的个人中心,可以使用push
                setTimeout(() => {
                  // console.log("qeq");
                  this.$router.replace({
                    path: "/personal",
                    // name: "HomePage",
                  });
                }, 800);
            }
          })
          .catch((err) => {
            // 展开错误
            console.dir(err);
            // 提示错误
            this.$toast.fail("系统错误");
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.loginPage {
  padding: 30/360 * 100vw;
  .close {
    .iconicon-test {
      font-size: 26/360 * 100vw;
    }
  }
  .logoNew {
    position: relative;
    position: relative;
    width: 300/360 * 100vw;
    height: 178/360 * 100vw;
    .iconnew {
      position: absolute;
      font-size: 126/360 * 100vw;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 126/360 * 100vw;
      color: #cc3300;
      z-index: 2;
    }
    .cloud {
      position: absolute;
      left: 124/360 * 100vw;
      top: 37/360 * 100vw;
      width: 20/360 * 100vw;
      height: 20/360 * 100vw;
      border-radius: 10/360 * 100vw;
      z-index: 1;
      background-color: #bf8d8d;
      // 盒子阴影
      box-shadow: 6/360 * 100vw -2/360 * 100vw 0px 0px #bf8d8d,
        16/360 * 100vw -1px 0 #bf8d8d, 8/360 * 100vw 6/360 * 100vw 0 #bf8d8d,
        21/360 * 100vw 4/360 * 100vw 0 #bf8d8d, 28/360 * 100vw 1px 0 #bf8d8d,
        18/360 * 100vw -12/360 * 100vw 0 #ff5e00;
    }
    .moon {
      position: absolute;
      // left: 46.27777/100 * 360px;
      top: 24/360 * 100vw;
      left: 166/360 * 100vw;
      width: 50/360 * 100vw;
      height: 50/360 * 100vw;
      background-color: #fff;
      border-radius: 50%;
      transform: rotate(10deg);
      box-shadow: 14/360 * 100vw 2/360 * 100vw 0 -4/360 * 100vw #aaa0a0;
    }
  }
  .btn {
    width: 100%;
    height: 48/360 * 100vw;
    font-size: 20/360 * 100vw;
    color: #fff;
    border-radius: 24/360 * 100vw;
    border: none;
    margin-top: 30/360 * 100vw;
    // 点击后去除外轮廓线
    outline: none;
    background-color: #cc3300;
  }
}
</style>
